<template>
  <mind-map></mind-map>
  <!-- <el-button @click="showApiImportDialog">测试</el-button>
  <api-import-dialog ref="apiImportDialogRef"></api-import-dialog>
  <soap-api-form></soap-api-form> -->
  <!-- <dw-page-warpper>
    <div style="display: flex; width: 100%; height: 100%">
      <div class="menu-warpper">
        <div style="width: 50px; height: 100%; border-right: 1px solid #e6ecf5">
          <div class="menu-item">
            <div class="icon iconfont" style="font-size: 18px">&#xe792;</div>
            <div style="font-size: 12px; margin-top: 10px">服务器</div>
          </div>
          <div class="menu-item">
            <el-icon><Files /></el-icon>
            <div style="font-size: 12px; margin-top: 10px">文件</div>
          </div>
        </div>
      </div>
      <div style="width: 500px; height: 100%; background-color: #fff">
        <div style="width: 100%; height: 30px"></div>
      </div>
      <div style="width: calc(100% - 562px); height: 100%"></div>
    </div>
  </dw-page-warpper> -->
</template>

<script setup lang="ts">
import MindMap from '@/components/mind-map/index.vue';
// import ApiImportDialog from '@/components/import-dialog/api-import-dialog/index.vue'
// import SoapApiForm from '@/components/api-config-form/soap-api-form/index.vue'
// import { ref } from 'vue'
// defineOptions({
//   name: 'DwTest',
// })
// const apiImportDialogRef = ref()
// const showApiImportDialog = () => {
//   apiImportDialogRef.value.showDialog()
// }
</script>
<style scoped>
/* .menu-warpper {
  position: relative;
  width: 61px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
}
.menu-item {
  display: flex;
  align-items: center;
  width: 50px;
  flex-direction: column;
  align-items: center;

  border-radius: 3px;
}

.menu-item:hover {
  background-color: #f0f0f0;
  cursor: pointer;
} */
</style>
